<template>
  <div class="userConfig">
    <header>
      <div class="title">
        <h4>账号设置</h4>
      </div>
      <p>
        禁止发送色情、暴力、政治等敏感信息!违者封号!
      </p>
    </header>
    <ul class="recharge_list">
      <li :class="item.id == active.activeId ? 'active':''" v-for="item in userConfigList" :key="item.id"
        @click="changeConfig(item.id)">
        <img :src="item.id == active.activeId ? item.imgActiveUrl : item.imgUrl" alt="">
        <div class="recharge_list_title">
          {{ item.text }}
        </div>
      </li>
    </ul>
    <section class="usetContent">
      <Component @toAddToken="changeConfig(2)" :is="active.Name"></Component>
    </section>
  </div>
</template>
<script lang='ts' setup>
import UserInfoU from '@/components/userConfigList/UserInfoU.vue';
import Account from '@/components/userConfigList/Account.vue';
import Recharge from '@/components/userConfigList/Recharge.vue';

import img1 from '@/assets/img/recharge/account.png'
import imgA from '@/assets/img/recharge/account-active.png'
import img2 from '@/assets/img/recharge/overview.png'
import imgB from '@/assets/img/recharge/overview-active.png'
import img3 from '@/assets/img/recharge/recharge.png'
import imgC from '@/assets/img/recharge/recharge-active.png'

import { reactive ,ref} from 'vue';

const active = ref({
  activeId :2,
  Name: Recharge
});

//因为需要跳转充值页面(没有单独的路由)  所以第一个按充值来 图省事
const userConfigList = reactive([

  { id: 0, text: '总览', imgUrl: img1, imgActiveUrl: imgA, comp: UserInfoU },
  { id: 1, text: '账户', imgUrl: img2, imgActiveUrl: imgB, comp: Account },
  { id: 2, text: '充值', imgUrl: img3, imgActiveUrl: imgC, comp: Recharge },

])
const changeConfig = (id:number)=>{
  active.value.activeId = id
  active.value.Name = userConfigList[id].comp
}



</script>
<style scoped lang='scss'>

.userConfig{
  padding: 42px 54px;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-sizing: border-box;
  .title{
    border-left:  5px solid #C90000;
    padding-left: 10px;
    display: flex;
    align-items: center;
  height: 37px;
    h4 {
        width: 112px;
        line-height: 37px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 23px;
        color: #232323;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
  }

  p{
background: #FFF7F7;
  border-radius: 8px 8px 8px 8px;
  // border: 1px solid #C90000;
  border:.15vw solid #C90000;
  color: #C90000;
height: 42px;
width: 100%;
line-height: 42px;
padding-left: 15px;
margin-top: 30px;
box-sizing: border-box;
}
.recharge_list {
    display: flex;
   margin: 50px 0;

    li{
    width: 70px;
      display: flex;
      align-items: center;
        font-size: 20px;
      border-bottom: 7px solid transparent;
      box-sizing: border-box;
      font-weight: 400;
        margin-right: 100px;
        cursor: pointer;
      .recharge_list_title{
        padding: 10px 4px;
      }


      img {
        width: 14px;
        height: 14px;
        border: 4px;
      }
    }
.active {
  color: #C90000;
  border-bottom:7px solid #C90000;
}
}
}
.usetContent{
  background-color: #FFF;
  flex: 1;
  border-radius: 0.5vw;
}



</style>
